<template>
	<view class="demo">
			<view class="tab">
				<view :class="activeTab==index?'active tab-item':'tab-item'" v-for="(item,index) in tabList"
					:key="index" @click="changeTab(item,index)">
					{{item}}
					<view v-if="item==='出售'">(64)</view>
					<view class="line"></view>
				</view>
			</view>
			<view class="sell" v-if="activeTab==0">
				<p style="line-height: 10vw;font-size: 4vw;color: #ccc;">2024-10-19 01:12:36</p>
				<view class="views">
					<view class="views_top">
						<view class="views_top_left">
							<h4>购买成功通知</h4>
						</view>
						<view class="views_top_right" @click="orders">
							查看订单 >
						</view>
					</view>
					<view class="texts">
						您购买的物品【MAC-10(略有磨损)】，由于您的Steam账号无
						法交易。订单已取消。2.00元已原路退回。系统监测到您有多
						次违约行为，暂时封禁您的购买功能。解封时间:2024-10-25
						20:00:00
					</view>
				</view>
				
			</view>
			<view class="sell" v-if="activeTab==1">
				<p style="line-height: 10vw;font-size: 4vw;color: #ccc;">2024-10-19 01:12:36</p>
				<view class="views">
					<view class="views_top">
						<view class="views_top_left">
							<h4>购买失败通知</h4>
						</view>
						<view class="views_top_right">
							查看订单 >
						</view>
					</view>
					<view class="texts">
						您购买的物品【MAC-10(略有磨损)】，由于您的Steam账号无
						法交易。订单已取消。2.00元已原路退回。系统监测到您有多
						次违约行为，暂时封禁您的购买功能。解封时间:2024-10-25
						20:00:00
					</view>
				</view>
			</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
				                    name: '关注',
				                }, { 
				                    name: '推荐',
				                }],
								tabList: ["交易通知", "系统通知"],
								activeTab: 0,
			}
		},
		methods: {
			orders(){
				uni.navigateTo({
					url:"/pages/message/oug/oug"
				})
			},
			changeTab(item, index) {
				this.activeTab = index
			},
		}
	}
</script>

<style>
.demo{
		width: 100vw;
		height: 90vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tab{
		
			width: 100%;
			height: 15vw;
			background-color: white;
			display: flex;
		
			.tab-item {
				width: 45vw;
				height: 15vw;
				line-height: 15vw;
				margin-left: 5vw;
				flex-direction: column;
				align-items: center;
				display: flex;
				font-size: 4.5vw;
				font-weight: bold;
				color: #b0b0b0;
				
			}
		
			.active {
				color: black;
				position: relative;
		
				.line {
					width: 6vw;
					height: 1vw;
					position: absolute;
					background-color: black;
					bottom: 0;
					left: calc(50% - 3vw);
				}
			}
		
	}
	.sell{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.views{
		width: 90%;
		height: 40vw;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.views_top{
		width: 90%;
		height: 10vw;
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.views_top_left{
		width: 75%;
		height: 100%;
		line-height: 10vw;
		font-size: 4vw;
	}
	.views_top_right{
		width: 25%;
		height: 100%;
		line-height: 10vw;
		font-size: 4vw;
		color: #ccc;
	}
	.texts{
		width: 90%;
		height: 30vw;
		font-size: 4vw;
	}
</style>
